<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lzy">
    <title>lzy-</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        html,body{
            height: 100%;
        }
        body{
            margin: 0;
        }
        *{
            box-sizing: border-box;
        }
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            border-bottom: 1px dashed gray;
            padding: 0px 150px;
            position: relative;
            color: blue;
        }
        li{
            display: inline-block;
            /*width: 100px;*/
            /*margin-left: 50px;*/
            margin: 10px 20px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
            padding: 0 2px;
        }
        #outer{
            width: 80%;
            background-color: #FCFCFB;
            border: 1px solid gray;
            margin: 100px auto;
        }
        #name::before{
            content: '品牌:';
            display: inline-block;
            width: 100px;
            position: absolute;
            left: 50px;
            color: black;
            text-align: right;
            top: 15px; 
        }
        #price::before{
            content: '价格:';
            display: inline-block;
            width: 100px;
            position: absolute;
            left: 50px;
            color: black;
            text-align: right;
            top: 15px;            
        }
        #size::before{
            content: '主屏尺寸:';
            display: inline-block;
            width: 100px;
            position: absolute;
            left: 50px;
            color: black;
            text-align: right;
            top: 15px;             
        } 
        #inter::before{
            content: '网络:';
            display: inline-block;
            width: 100px;
            position: absolute;
            left: 50px;
            color: black;
            text-align: right;
            top: 15px;             
        }
        #heXin::before{
            content: '核心数:';
            display: inline-block;
            width: 100px;
            position: absolute;
            left: 50px;
            color: black;
            text-align: right;
            top: 15px;             
        }
        #only::before{
            content: '特性:';
            display: inline-block;
            width: 100px;
            position: absolute;
            left: 50px;
            color: black;
            text-align: right;
            top: 15px;            
        }
        li:hover{
            background-color:orange;
            color: white; 
        }                           
        .active{
            background-color: orange;
            color: white;
        }
        #outer #result{
            padding: 0px 150px;
            overflow: hidden;
            width: 100%;
            height: 50px;
            position: relative;
        }
        #outer #result::before{
            content: '你已选择:';
            display: inline-block;
            width: 100px;
            position: absolute;
            left: 50px;
            color: black;
            text-align: right;
            top: 15px;             
        }
        #outer #result div{
            display: inline-block;
            border: 1px solid red;
            margin: 15px 10px;
            display: none;
            float: left;
            cursor: pointer;
            text-align: center;
        }
        #outer #result p.closeAll{
            color: red;
            border: none;
            display: none;
            cursor: pointer;
        }    
    </style>
</head>
<body>
    <div id="outer">
        <ul id="name">
            <li>苹果</li>
            <li>小米</li>
            <li>华为</li>
            <li>联想</li>
            <li>中兴</li>
            <li>三星</li>
            <li>魅族</li>
            <li>酷派</li>
            <li>诺基亚</li>
            <li>苹果</li>
            <li>小米</li>
            <li>华为</li>
            <li>联想</li>
            <li>中兴</li>
            <li>三星</li>
            <li>魅族</li>
            <li>酷派</li>
            <li>诺基亚</li>
            <li>苹果</li>
            <li>小米</li>
            <li>华为</li>
            <li>联想</li>
            <li>中兴</li>
            <li>三星</li>
            <li>魅族</li>
            <li>酷派</li>
            <li>诺基亚</li>        
        </ul>
        <ul id="price">
            <li>500元以下</li>
            <li>500-1000元</li>
            <li>1000-1500元</li>
            <li>1500-2000元</li>
            <li>2000-3000元</li>
            <li>3000-4000元</li>
            <li>4000元以上</li>
        </ul>
        <ul id="size">
            <li>6.0英寸以上</li>
            <li>5.5-6.0英寸</li>
            <li>5.0-5.5英寸</li>
            <li>4.5-5.0英寸</li>
            <li>4.0-4.5英寸</li>
            <li>4.0英寸以下</li>
        </ul>
        <ul id="inter">
            <li>全网通</li>
            <li>双4G</li>
            <li>移动4G</li>
            <li>联通4G</li>
            <li>电信4G</li>
        </ul>
        <ul id="heXin">
            <li>十核</li>
            <li>八核</li>
            <li>双四核</li>
            <li>四核</li>
            <li>双核及以下</li>
        </ul>
        <ul id="only">
            <li>大屏幕</li>
            <li>双卡双待</li>
            <li>指纹识别</li>
            <li>千元机</li>
            <li>拍照神器</li>
        </ul>
        <div id="result">
            <div class="name">
                <span></span>
                <span class="close">✘</span>
            </div>
            <div class="price">
                <span></span>
                <span class="close">✘</span>
            </div>
            <div class="size">
                 <span></span>
                <span class="close">✘</span>
            </div>
            <div class="inter">
                <span></span>
                <span class="close">✘</span>
            </div>
            <div class="heXin">
                <span></span>
                <span class="close">✘</span>
            </div>
            <div class="only">
                <span></span>
                <span class="close">✘</span>
            </div>
            <p class="closeAll">
                清除筛选结果
            </p>
        </div>
    </div>
</body>
</html>
<script>
    
    $('li').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        var id=$(this).parent().attr('id');
        $('.'+id).show().find('span').first().html($(this).html());
        showNum();
    });

    $('.close').click(function(){
        $(this).parent().hide();
        var name=$(this).parent().attr('class');
        $('#'+name).find('li').removeClass('active');
        showNum();
    })
    
    function showNum(){
        var count=0;
        $('#result div').each(function(index){
            if($('#result div').eq(index).css('display')=='block'){
                count++;
            }else{
                count=count;
            }                
        });
        // console.log('count='+count); 
        if(count>=2){
            $('#result p.closeAll').show();
        }else{
            $('#result p.closeAll').hide();
        }
    }

    $('#result p.closeAll').click(function(){
        $('#result div').hide();
        $('li').removeClass('active');
        showNum();
    })
</script>